<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ name }}</p>
        用户名：<input type="text" v-model="name">
        <br>

        <p>{{ sex }}</p>
        性别：<input type="radio" v-model="sex" value="male">男
             <input type="radio" v-model="sex" value="female">女</input> 
        <br>

        <p>{{ hobbies }}</p>
        爱好：<input type="checkbox" v-model="hobbies" value="football">足球
             <input type="checkbox" v-model="hobbies" value="basketball">篮球
             <input type="checkbox" v-model="hobbies" value="swimming">游泳
        <br>

        <p>{{ agree }}</p>
        同意：<input type="checkbox" v-model="agree">

    </div>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                name: '张三',
                sex: 'male',
                hobbies: [],
                agree: false, // false表示未勾选，true表示已勾选
            }
        })
    </script>
</body>
</html>